<script setup lang="ts">
// 导入工具函数
import { ref } from "vue";
// 定义基本类型
const num =  ref(10)

// 代码中如果需要修改的话 需要通过 .value 修改
const changeNum =()=>{
  num.value ++
}


// 定义复杂类型
const foods = ref (['西兰花','猪脚饭'])

const changeFoods = ()=>{
  foods.value.push('狗屎')
}
</script>



<template>

<p @click="changeNum">{{ num }}</p>
<p @click="changeFoods">{{ foods }}</p>
 <!-- ref 定义的数据再UI界面中使用或修改 不需要写 .value -->
<button @click="foods.unshift('翔')">修改数据</button>

</template>



<style scoped>

</style>